<template>
    <div class="connection">
        <el-breadcrumb separator-class="el-icon-arrow-right" class="bread">
            <el-breadcrumb-item :to="{ path: '/TopChannel/ChannelList' }">
                <span :class="{ 'active': this.$route.path == '/TopChannel/ChannelList' }">直连设置</span>
            </el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/TopChannel/ConnectionSetting' }">
                <span :class="{ 'active': this.$route.path == '/TopChannel/ConnectionSetting' }">
                    <span v-if="operate == 1">{{ settingChannel }}渠道设置</span>
                    <span v-if="operate == 2">启动{{ settingChannel }}直连</span>
                </span>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 设置 -->
        <div v-if="operate == 1">
            <div class="ChannelSetting">
                <div class="ChannelSetting_Top">
                    <div class="ChannelSetting_Top_Pic ">
                        <img src="../../../../assets/image/微信.png" />
                    </div>
                    <div class="ChannelSetting_Top_Text">
                        <div class="ChannelSetting_Top_Text_Title">
                            {{ settingChannel }}渠道直连
                            <span @click="cancelConnect">取消直连</span>
                        </div>
                        <div class="ChannelSetting_Top_Text_desc">
                            <p>您已开通{{ settingChannel }}直连，下一步请在下方列表
                                <span style="color: black;">关联房型</span>，建立直连关系。
                            </p>
                            <p>直连后，渠道将自动同步PMS的房态、库存，渠道订单将自动落入观视界。
                                <span style="color: #0486FE;">查看操作指南。</span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="ChannelSetting_Center">
                    <!-- 渠道设置 -->
                    <div class="ChannelSetting_Center_radios">
                        <el-radio-group v-model="showRadio">
                            <el-radio-button :label=1>房源管理</el-radio-button>
                            <!-- <el-radio-button :label=2>默认可订设置</el-radio-button>
                            <el-radio-button :label=3>账号管理</el-radio-button>
                            <el-radio-button :label=4>短信通知</el-radio-button> -->
                        </el-radio-group>
                        <div>
                            <el-button v-if="showRadio == 2 && !setting.edit" type="primary" size="small"
                                @click="setting.edit = true">修改设置</el-button>
                            <el-button v-if="showRadio == 2 && setting.edit" type="primary" size="small"
                                @click="setting.edit = false">保存设置</el-button>
                            <el-button v-if="showRadio == 3" type="primary" size="small">添加账号</el-button>
                        </div>
                    </div>
                    <!-- 筛选部分 -->
                    <div class="ChannelSetting_Center_screen" v-if="showRadio == 1">
                        <div>
                            <el-select v-model="selectStatusValue" size="small" style="width: 165px;"
                                @change="changeSelectStatus">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                        <div>
                            <el-button type="primary" icon="el-icon-refresh-right" size="small"
                                @click="refresh">刷新房源信息</el-button>
                        </div>
                    </div>

                    <!-- 提醒部分 -->
                    <div class="ChannelSetting_Center_redmin" v-if="showRadio == 3 || showRadio == 2" :style="{
                        'backgroundColor': showRadio == 2 ? '#F2FBEA' : 'FFF7E6',
                        'borderColor': showRadio == 2 ? '#8ED16D' : 'FFF7E6'
                    }">
                        <p v-if="showRadio == 3">您可以添加多个房东账号(最多五个),房源统一管理</p>
                        <p v-if="showRadio == 2">
                            默认对所有房源生效，若您想更改个别房源的可订设置,
                            请在<span style="color: #0486FE;">房源设置</span>中设置
                        </p>
                    </div>
                </div>
                <!-- 显示内容部分 -->
                <div class="ChannelSetting_Conten">
                    <!-- 房源管理 -->
                    <div class="ChannelSetting_Conten_Room" v-if="showRadio == 1">
                        <!-- 没有数据时展示 -->
                        <div class="ChannelSetting_Conten_Room_None" v-if="tableData_room.length == 0">
                            <div class="ChannelSetting_Top_Pic "></div>
                            <p style=" margin: 20px 0;">暂无房源</p>
                            <p>直连后，渠道将自动同步PMS的房态、库存，渠道订单将自动落入观视界。 <span style="color: #0486FE;">刷新房源信息</span></p>
                            <p>或尝试添加其他<span style="color: #0486FE;">{{ settingChannel }}房东账号</span></p>
                        </div>

                        <!-- 有数据时展示表格 -->
                        <div class="ChannelSetting_Conten_Room_Table" v-if="tableData_room.length > 0">
                            <el-table :data="tableData_room" :style="{ width: '100%', height: tableMaxHeight }"
                                :key="tableKey" :max-height="tableMaxHeight">
                                <el-table-column prop="status" label="直连状态" width="180" align="center">
                                    <template slot-scope="{row}">
                                        <div>
                                            {{ row.operate ? '直连中' : '未直连' }}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="channel_room_title" width="200">
                                    <template slot="header">
                                        <div>{{ settingChannel }}房型名称</div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="room_title" label="本地房型" width="180">
                                    <template slot-scope="{row}">
                                        <div>
                                            <!-- 如果row.room_title有值，则说明关联了房型 -->
                                            <div v-if="row.room_title"> {{ row.room_title }}</div>
                                            <!-- 没关联房型显示编辑图标 -->
                                            <div v-else class="editIcon" @click="connectRoomChange(row)">
                                                <i class="el-icon-edit-outline"></i>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="关联房间号">
                                    <template slot-scope="{row}">
                                        <div v-if="row.room_title && row.hotel_room_num_ids.length > 0"
                                            class="ChannelSetting_Conten_Room_Table_roomID">
                                            <div class="ChannelSetting_Conten_Room_Table_roomID_item">
                                                <span v-for="(item, index) in row.roomIds" :key="index" class="">
                                                    {{ item }}
                                                </span>
                                            </div>

                                            <div class="editIcon" @click="connectRoomChange(row)">
                                                <i class="el-icon-edit-outline"></i>
                                            </div>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="100" fixed="right" align="center">
                                    <template slot-scope="{row}">
                                        <div @click="switchChange(row)">
                                            <el-switch v-model="row.operate" active-color="#0486FE"
                                                inactive-color="#999999">
                                            </el-switch>
                                        </div>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                    <!-- END房源管理 -->

                    <!-- 默认可订设置 -->
                    <div class="ChannelSetting_Conten_Setting" v-if="showRadio == 2">
                        <div class="ChannelSetting_Conten_Setting_item">
                            <div class="ChannelSetting_Conten_Setting_item_box">
                                <div class="ChannelSetting_Conten_Setting_title">提前多久预订</div>
                                <div class="ChannelSetting_Conten_Setting_conten">
                                    <span v-if="!setting.edit">当天18：00前</span>
                                    <span v-if="setting.edit">修改设置</span>
                                </div>
                            </div>
                            <div class="ChannelSetting_Conten_Setting_item_box">
                                <div class="ChannelSetting_Conten_Setting_title">最多预订多久以后的房间</div>
                                <div class="ChannelSetting_Conten_Setting_conten">
                                    <span v-if="!setting.edit">三个月</span>
                                    <span v-if="setting.edit">修改设置</span>
                                </div>
                            </div>
                        </div>
                        <div class="ChannelSetting_Conten_Setting_item">
                            <div class="ChannelSetting_Conten_Setting_item_box">
                                <div class="ChannelSetting_Conten_Setting_title">最少入住天数</div>
                                <div class="ChannelSetting_Conten_Setting_conten">
                                    <span v-if="!setting.edit">{{ setting.minDays }}</span>
                                    <el-input-number v-if="setting.edit" v-model="setting.minDays" :min="1"
                                        :max="Infinity"></el-input-number>
                                </div>
                            </div>
                            <div class="ChannelSetting_Conten_Setting_item_box">
                                <div class="ChannelSetting_Conten_Setting_title">最多入住天数</div>
                                <div class="ChannelSetting_Conten_Setting_conten">
                                    <span v-if="!setting.edit">{{ setting.maxDays }}</span>
                                    <el-input-number v-model="setting.maxDays" v-if="setting.edit" :min="1"
                                        :max="Infinity"></el-input-number>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END 默认可订设置 -->

                    <!-- 账号管理 -->
                    <div class="ChannelSetting_Conten_Admin" v-if="showRadio == 3">
                        <el-table :data="tableData_Admin" style="width: 100%">
                            <el-table-column prop="user" label="账户名">
                            </el-table-column>
                            <el-table-column prop="phone" label="手机号">
                            </el-table-column>
                            <el-table-column prop="email" label="邮箱">
                            </el-table-column>
                            <el-table-column prop="num" label="关联房间数">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template>
                                    <!-- slot-scope="{row}" -->
                                    <div>
                                        <span style="color: #0486FE;">查看房源</span>
                                        <span style="margin: 0 8px;">|</span>
                                        <span style="color: #F56C6C;">解除直连</span>
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <!-- END 账号管理 -->

                    <!-- 短信通知 -->
                    <div class="ChannelSetting_Conten_Info" v-if="showRadio == 4">
                        <div class="ChannelSetting_Conten_Info_top">
                            <span>请设置短信通知</span>
                            <el-button type="primary" size="small">保存设置</el-button>
                        </div>
                        <div class="ChannelSetting_Conten_Info_conten">
                            <div class="ChannelSetting_Conten_Info_conten_item">
                                <div class="ChannelSetting_Conten_Info_conten_item_Left">接收消息：</div>
                                <div class="ChannelSetting_Conten_Info_conten_item_Right">
                                    <el-switch v-model="info.isOpen" active-color="#13ce66" inactive-color="#ff4949">
                                    </el-switch>
                                </div>
                            </div>
                            <div class="ChannelSetting_Conten_Info_conten_item">
                                <div class="ChannelSetting_Conten_Info_conten_item_Left">请绑定接收手机：</div>
                                <div class="ChannelSetting_Conten_Info_conten_item_Right">您至多可以添加3个手机号码</div>
                            </div>
                            <!-- 手机号码数组 -->
                            <div class="ChannelSetting_Conten_Info_conten_item" v-for="( item, index ) in  info.user "
                                :key="index">
                                <div class="ChannelSetting_Conten_Info_conten_item_Left"></div>
                                <div class="ChannelSetting_Conten_Info_conten_item_Right">
                                    <el-input placeholder="请输入姓名" v-model="item.name"
                                        style="width: 100px;margin-right: 8px;" size="small">
                                    </el-input>
                                    <el-input placeholder="请输入手机号码" v-model="item.phone" style="width: 130px;" size="small">
                                    </el-input>
                                    <i class="el-icon-remove-outline" @click="delete_InfoUser(index)" v-if="index != 0"></i>
                                </div>
                            </div>
                            <!-- 添加 -->
                            <div class="ChannelSetting_Conten_Info_conten_item">
                                <div class="ChannelSetting_Conten_Info_conten_item_Left"></div>
                                <div class="ChannelSetting_Conten_Info_conten_item_Right">
                                    <el-button type="text" style="color: black;" @click="add_InfoUser"
                                        :disabled="info.user.length >= 3"> + 继续添加</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- END 短信通知 -->
                </div>
            </div>
        </div>


        <!-- 开始直连 -->
        <div v-if="operate == 2" style="height: 100%;background-color: #e8edbd;">
            <div class="ConnectionSetting" v-if="start == false">
                <div class="ConnectionSetting_conten">
                    <div class="ConnectionSetting_conten_title">
                        <h4>{{ settingChannel }}渠道直连</h4>
                        <span>无需人工审核，快速开通直连，只需3步!</span>
                    </div>
                    <div class="ConnectionSetting_conten_step">
                        <div class="ConnectionSetting_conten_step_conten">
                            <!-- finish-status="success" -->
                            <el-steps :active="active">
                                <el-step title="EBK授权" :description="`获取${settingChannel}在售房型产品`"></el-step>
                                <el-step title="关联房间号" description="匹配本地房型、房间号"></el-step>
                                <el-step title="关联价格方案" :description="`设置要向${settingChannel}同步的价格`"></el-step>
                            </el-steps>
                        </div>
                    </div>
                    <div class="ConnectionSetting_conten_text">
                        <p> {{ settingChannel }}EBK全直连前，掌柜需要做什么准备?</p>
                        <p>1、完成{{ settingChannel }}签约，并获取到{{ settingChannel }}现付/预付产品的子酒店ID。</p>
                        <p>2、在观视界上完成房型和房间号的创建</p>
                        <p>3、在观视界价格管理修改{{ settingChannel }}渠道对应的房型价格，用于直连价格同步</p>
                    </div>
                    <div class="ConnectionSetting_conten_button">
                        <div>
                            <el-button @click="toPage('渠道列表')">取 消</el-button>
                            <el-button type="primary" @click="start = true">开始直连</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ConnectionSetting" v-if="start == true">
                <div class="ConnectionSetting_conten_two">
                    <div class="ConnectionSetting_conten_two_title">
                        <p>1、直连后，可实现自动落单、{{ settingChannel }}自动入离店审核:{{ settingChannel }}上的房态房量、房价来自您在观视界中维护的数据</p>
                        <p>2、直连，{{ settingChannel }}房型出现“直”标识，如果您需要修改房型匹配，无器断开直连，可直接在房间关联处点击操作修改即可</p>
                        <p>3、现付产品推送卖价(含佣金) ，预付产品推送底价(扣除佣金后) ，在关联价格方案时请注意核对观视界价格是否正确</p>
                        <p>4、如遇以下场景，请及时前往EBK人工处理订单: 钟点房、现转预、超时取消、延住订单以及其他{{ settingChannel }}客服线下发单等场景</p>
                    </div>
                    <div class="ConnectionSetting_conten_two_conten">
                        <div>
                            <div class="ConnectionSetting_conten_two_form">
                                <h4>授权观视界直连{{ settingChannel }}</h4>
                                <h6>{{ hotelName }}</h6>
                                <div class="ConnectionSetting_conten_two_formBox">
                                    <el-form label-position="right" label-width="0" :model="form">
                                        <el-form-item label="">
                                            <el-input v-model="form.hotelName" size="small"
                                                :placeholder="`请输入${settingChannel}酒店名称`"></el-input>
                                        </el-form-item>
                                        <el-form-item label="">
                                            <el-input v-model="form.newChildId" size="small"
                                                placeholder="请输入预付酒店ID"></el-input>
                                        </el-form-item>
                                    </el-form>
                                </div>

                                <div class="ConnectionSetting_conten_two_button">
                                    <el-button size="mini" @click="toPage('渠道列表')">返回</el-button>
                                    <el-button type="primary" size="mini" @click="startConnect">开始直连</el-button>
                                </div>
                            </div>
                            <p>观视界需要通过{{ settingChannel }}子酒店ID获取您在{{ settingChannel }}上的售卖房型产品。子酒店ID请登陆{{ settingChannel
                            }}后台查看或咨询您的业务经理
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 确认关闭直连对话框 -->
        <el-dialog :show-close="false" :visible.sync="dialog_room" width="30%">
            <div slot="title">
                取消房型关联<i class="el-icon-warning-outline" style="color:#FACF60;margin-left: 5px;"></i>
            </div>
            <P style="line-height: 22px;color:black"> {{ connectRoomItem ? connectRoomItem.channel_room_title : '未知' }} ：
                您正在断开此房型直连，断开后，如需再次开启，需要重新设置关联房间号及价格方案</P>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog_room = false" size="small">取 消</el-button>
                <el-button type="primary" @click="cancelConnectRoom" size="small">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 选择关联房间号对话框 -->
        <el-dialog class="setRoom_dialog" title="设置关联房间号" :visible.sync="dialog_setRoom" width="500px">
            <div>
                <div class="setRoom_dialog_room" v-for="( item, index ) in  association_room " :key="item.id">
                    <el-radio v-model="select_association_room_index" :label="index" @change="ChangeRoom">
                        {{ item.title }}
                    </el-radio>
                    <div class="setRoom_dialog_room_num">
                        <el-checkbox-group v-model="item.selectRoom">
                            <el-checkbox v-for="( room ) in  item.rooms " :label="room.room_num" :key="room.id"
                                :disabled="index != select_association_room_index">
                                {{ room.room_num }}
                            </el-checkbox>
                        </el-checkbox-group>
                    </div>
                </div>
                <p v-if="association_room.length == 0">无可关联房型</p>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog_setRoom = false" size="small">取 消</el-button>
                <el-button type="primary" @click="confirmConn" size="small">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 关联成功跳转页面对话框 -->
        <el-dialog title="提醒" :show-close="false" :visible.sync="dialog_success" width="30%">
            <P style="line-height: 22px;color:black">
                您已成功与此房型直连，即将跳转至设置页面</P>
            <p>(点击取消则返回渠道列表)</p>
            <span slot="footer" class="dialog-footer">
                <el-button @click="toPage('渠道列表')" size="small">取 消</el-button>
                <el-button type="primary" @click="toPage('设置')" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
    data() {
        return {
            // 筛选房源状态部分
            options: [{
                value: 0,
                label: '全部直连状态'
            }, {
                value: 1,
                label: '直连中'
            }, {
                value: 2,
                label: '未直连'
            }],
            selectStatusValue: 0,//表格筛选值

            showRadio: 1,//选择设置单选按钮（房源管理/短信通知
            operate: sessionStorage.getItem('settingOperate'),//操作1设置，2开始直连


            // 直连部分
            start: false,//点击开始直连
            hotelName: sessionStorage.getItem('hotel_name'),//当前酒店名称
            settingChannel: sessionStorage.getItem('settingChannel'),//当前操作的渠道
            active: 3,//当前 激活步骤
            // 直连表单
            form: {

                hotelName: '',//酒店名称
                newChildId: null//酒店id
            },


            // 设置部分
            dialog_success: false,//关联成功对话框
            dialog_setRoom: false,//设置关联房间对话框
            dialog_room: false,//提醒是否关闭直连对话框
            connectRoomItem: null,//当前选中关联的渠道房型
            select_association_room_index: 0,//选中的房型
            all_room: [],//全部关联房间(本地房型房间)对话框
            association_room: [],//可选关联房间(本地房型房间)对话框
            tableKey: true,//表格key值
            maxHeight: window.innerHeight - 430,//表格最大 高度
            tableData_room: [],//房源管理列表表格数据



            setting: {
                edit: false,//是否开始编辑
                minDays: 1,
                maxDays: 90,
            },
            // 短信通知部分数据
            info: {
                isOpen: true,//是否接收信息
                user: [
                    {
                        name: '',
                        phone: null
                    }
                ]
            },
            // 短信通知
            tableData_Admin: [{
                user: '账户名',
                phone: '1234567891',
                email: '12345678@qq.com',
                num: '10',
            }],
            tableData_Setting: [],
            tableData_Info: [],


        }
    },
    computed: {
        // 表格最大高度
        tableMaxHeight() {
            return this.maxHeight + 'px';
        }
    },
    created() {
        //当操作为1（'设置'）时才需要请求房源房型数据
        if (sessionStorage.getItem('settingOperate') == 1) {
            // this.getChannelRoom()
            this.getChannel()
        }
    },
    mounted() {
        // 监听窗口大小变化
        window.addEventListener('resize', this.handleResize);
    },
    beforeDestroy() {
        // 移除窗口大小变化的监听
        window.removeEventListener('resize', this.handleResize);
    },
    methods: {

        // 改变选中的直连状态
        changeSelectStatus(v) {
            console.log(v, '改变选中的直连状态');
            this.getChannel()

        },
        // 获取不同屏幕大小表格的最大高度
        handleResize() {
            // 在这里处理窗口大小变化的逻辑
            let screenHeight = window.innerHeight;
            // console.log(screenHeight, '高');
            // 425 除了表格其它元素的高度
            this.maxHeight = screenHeight - 180
            console.log(this.maxHeight, ' this.maxHeight', window.innerHeight);
        },
        /**
         * 
         * @param {*} pageName 页面名 
         */
        toPage(pageName) {
            this.dialog_success = false
            if (pageName == '渠道列表') {
                this.$router.replace('/TopChannel/ChannelList')
            } else if (pageName == '设置') {
                sessionStorage.setItem('settingOperate', 1)//操作1设置，2开始直连
                this.operate = 1
                this.getChannel()
            }
        },
        /**
         * 点击开关时触发的事件
         * @param {*} row
         *
         * 1==将开关值取反，让他保持原来的状态
         * 2==判断当前状态
         * 直连中，打开关闭直连提醒对话框
         * 未直连，打开选择关联房间号对话框
         */
        switchChange(row) {
            console.log(row, 123);
            this.connectRoomItem = row
            row.operate = !row.operate
            this.connectRoomItem = row
            if (row.operate) {
                this.dialog_room = true
            }
            else {
                this.dialog_setRoom = true
            }
            this.tableKey = !this.tableKey
        },
        // 确认取消直连
        cancelConnectRoom() {
            console.log('‘确认取消直连');
            this.dialog_room = false
            let data = {
                id: this.connectRoomItem.id,
            }
            // /supplier/hotel-pms-channel/room/clear
            this.my_request('supplier/hotel-pms-channel/room/clear', data, 'PUT').then(res => {
                console.log(res, '确认取消直连结果');
                let { code } = res.data
                if (200 === code) {
                    this.$message.success('操作成功');
                    this.getChannel()
                } else {
                    this.$message.error('操作失败，请重试');
                }
            })
        },

        //点击关联房型的编辑图标
        connectRoomChange(row) {
            // console.log(row, ‘当前操作行’);
            this.connectRoomItem = row
            this.dialog_setRoom = true
        },
        // 确定关联按钮(渠道关联房型)
        confirmConn() {
            let itme = this.association_room[this.select_association_room_index]
            // selectRoom
            let data = {
                room_id: itme.id,
                id: this.connectRoomItem.id,//当前选中关联房源id
                hotel_room_num_ids: itme.selectRoom.join(','),//房间号id，多个房间逗号隔开，字符串
            }
            if (data.hotel_room_num_ids.length == 0) {
                this.$message.error('请选择房间');
                return
            }
            console.log(data, '渠道关联房型数据');
            this.my_request('supplier/hotel-pms-channel/room', data, 'POST').then(res => {
                // console.log(res, '渠道关联房型结果');
                let { code, message } = res.data
                if (200 === code) {
                    this.$message.success(message);
                    this.dialog_setRoom = false
                    this.getChannel()
                } else {
                    this.$message.error(message);
                }
            })
        },

        /**
         * 设置关联房间号，改变选中的房型
         * this.association_room 房型数组
         * @param {*} v 选中房型的下标 
         */
        ChangeRoom(v) {
            this.association_room.forEach(item => {
                item.selectRoom = []//改变选中的房型时，清空所有选中房型房间号。
            })
        },

        //刷新房源信息
        refresh() {
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
                channel_id: sessionStorage.getItem('connectchannelId'),//微信小程序渠道id2，本地（门市）1
            }
            this.my_request('supplier/hotel-pms-channel/fresh', data, "PUT").then(res => {
                console.log(res, '刷新房源信息结果');
                let { code, message } = res.data
                if (200 == code) {
                    this.$message.success(message);
                } else {
                    this.$message.error(message);
                }
            })
        },


        //获取本地待关联房源，用于设置颗关联的房型房间
        getChannelRoom() {
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
                // channel_id: sessionStorage.getItem('connectchannelId'),//微信小程序渠道id2，本地（门市）1
            }
            // supplier/hotel-pms-channel/room
            this.my_request("supplier/hotel-pms", data, "GET").then(res => {
                console.log(res, '获取本地待关联房源结果');
                let { code, data } = res.data
                if (200 === code) {
                    this.association_room = data.map(item => {
                        item.checked = false
                        item.selectRoom = []
                        return item
                    })
                    // this.association_room = JSON.parse(JSON.stringify(this.all_room))
                    console.log(this.association_room, ' this.association_room ');
                }
            })
        },

        // 获取渠道房源
        getChannel() {
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
                channel_id: sessionStorage.getItem('connectchannelId'),//微信小程序渠道id2，本地（门市）1
            }
            this.my_request("/supplier/hotel-pms-channel/list", data, "GET").then(res => {
                console.log(res, '获取渠道房源结果');
                let { code, data } = res.data
                if (200 == code) {
                    this.tableData_room = data.list
                    this.tableData_room.forEach((item) => {
                        item.operate = item.room_id == 0 ? false : true
                        item.roomIds = item.hotel_room_num_ids ? item.hotel_room_num_ids.split(',') : item.hotel_room_num_ids
                    })
                    this.getChannelRoom()
                    if (this.selectStatusValue == 1) {//已直连
                        this.tableData_room = this.tableData_room.filter(item => {
                            return item.room_id != 0
                        })
                    } else if (this.selectStatusValue == 2) {//未直连
                        this.tableData_room = this.tableData_room.filter(item => {
                            return item.room_id == 0
                        })
                    } else if (this.selectStatusValue == 0) {//全部
                        this.tableData_room = this.tableData_room
                    }

                    this.tableKey = !this.tableKey
                    console.log(this.tableData_room, 'this.tableData_room');
                }
            })
        },

        // 开始直连
        startConnect() {
            if (!this.form.hotelName) {
                this.$message.error('请填写关联酒店名称');
                return
            } else if (!this.form.hotelName) {
                this.$message.error('请填写关联酒店ID');
                return
            }
            console.log(this.form, '开始直连form数据');
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
                channel_id: sessionStorage.getItem('connectchannelId'),//微信小程序渠道id2，本地（门市）1
                name: this.form.hotelName,
                channel_hotel_id: this.form.newChildId,
                // name: '东莞测试酒店',//小程序名称
                // channel_hotel_id: 8623,//小程序酒店id
            }
            console.log(data, '开始直连data数据');
            this.my_request('supplier/hotel-pms-channel/hotel', data, 'POST').then(res => {
                console.log(res, '直连结果');
                let { code } = res.data
                if (200 == code) {
                    this.$message({
                        message: '关联成功',
                        type: 'success',
                        duration: 1500,
                    });
                    setTimeout(() => {
                        this.dialog_success = true
                    }, 1600)
                } else {
                    this.$message.error('关联失败，请重试');
                }
            })
        },
        // 取消直连
        cancelConnect() {
            let data = {
                hotel_id: sessionStorage.getItem('hotel_id'),//当前酒店id
                channel_id: sessionStorage.getItem('connectchannelId'),//微信小程序渠道id2，本地（门市）1
            }
            console.log(data, '取消直连data数据');
            this.my_request('supplier/hotel-pms-channel/hotel', data, 'DELETE').then(res => {
                console.log(res, '取消直连结果');
                let { code } = res.data
                if (200 == code) {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500
                    });
                    setTimeout(() => {
                        this.$router.replace('/TopChannel/ChannelList')
                    }, 1600)

                } else {
                    this.$message.error('操作失败，请重试');
                }
            })
        },


        // 删除房间
        delete_InfoUser(index) {
            this.info.user.splice(index, 1)
        },
        // 添加房间
        add_InfoUser() {
            this.info.user.push({
                name: null,
                phone: null
            })
        },
    }
}
</script>

<style lang=" scss" scoped src="../../css/ConnectionSetting.scss"></style>
